<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Websanova Paint</title>

    <script type="text/javascript" src="/js/jquery.1.8.2.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.mouse.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ui.draggable.min.js"></script>
    <script type="text/javascript" src="/js/wColorPicker.js"></script>
    <script type="text/javascript" src="/js/wPaint.js"></script>

    <link rel="Stylesheet" type="text/css" href="/css/wColorPicker.css" />
    <link rel="Stylesheet" type="text/css" href="/css/wPaint.css" />


    <style>
        ._wPaint_menu {
            position: fixed!important;
            margin-top: 30px;
        }
        #wPaint{
            position:relative;border:solid black 1px;
        }
        #loadImg,#pic_loadImg, #wPaint{
            margin-top:30px;
        }
        #rotateBtn,#editBtn{
            position: fixed;
            z-index: 999;
            top:0;
        }
    </style>
</head>
<body>
<div class="viewer-canvas">
    <img src="/testdata/sj.jpg">
</div>
<div id="rotateBtn">
    <button  onclick="editImage();">开始编辑</button>
    <button onclick="rotateImg('loadImg', 'left')">向左旋转</button>
    <button onclick="rotateImg('loadImg', 'right')">向右旋转</button>
    <button onclick="selectClose()">关闭</button>
</div>

<script type="text/javascript">
    var imgWidth, imgHeight;
    var imgurl, tempImg;
    $(function(){
        //获取图片原始路径
        var obj=window.parent.$(".viewer-canvas").find('img');
        if(obj.length>0){
            imgurl=obj.attr('src');
            var rate=getRate(imgurl);
            obj.attr("id","loadImg");
        }else{
            alert("无法获取图片路径，请重试");
            selectClose();
            return false
        }

        //判断是否需要压缩图片并初步加载图片
      /*  if(imgWidth==0){
            alert("图片加载不正确，无法获取图片大小");
            selectClose();
            return false
        }else if(imgWidth>800){
           imgurl = scraleURL(rate);
           imgHeight=800*rate;
           imgWidth=800;
        }
        $("body").append("<img id='loadImg' src='"+imgurl+"'/>");*/
    });

    //获取图片原始长宽及长宽比
    function getRate(Imgsrc){
        tempImg= document.createElement("img");
        tempImg.setAttribute("src",Imgsrc);
        imgWidth=tempImg.width;
        imgHeight = tempImg.height;
        return (imgHeight/imgWidth);
    }

    //等比缩小原始图片
    function scraleURL(r){
        var canvas = document.createElement("canvas");
        canvas.width = 800;
        canvas.height = 800*r;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(tempImg, 0, 0,800,800*r);
        return (canvas.toDataURL());
    }

    //旋转图片
    function rotateImg(pid,direction) {
        //最小与最大旋转方向，图片旋转4次后回到原方向
        var min_step = 0;
        var max_step = 3;
        var img = document.getElementById(pid);
        if (img == null)return;
        var height = img.height;
        var width = img.width;
        var step = img.getAttribute('step');
        if (step == null) {
            step = min_step;
        }
        if (direction == 'right') {
            step++;
            //旋转到原位置，即超过最大值
            step > max_step && (step = min_step);
        } else {
            step--;
            step < min_step && (step = max_step);
        }
        img.setAttribute('step', step);
        var canvas = document.getElementById('pic_' + pid);
        if (canvas == null) {
            img.style.display = 'none';
            canvas = document.createElement('canvas');
            canvas.setAttribute('id', 'pic_' + pid);
            img.parentNode.appendChild(canvas);
        }
        //旋转角度以弧度值为参数
        var degree = step * 90 * Math.PI / 180;
        var ctx = canvas.getContext('2d');
        switch (step) {
            case 0:
                canvas.width = width;
                canvas.height = height;
                ctx.drawImage(img, 0, 0);
                ctx.translate(0,0);
                break;
            case 1:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, 0, -height);
                ctx.translate(0,0);
                break;
            case 2:
                canvas.width = width;
                canvas.height = height;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, -height);
                ctx.translate(0,0);
                break;
            case 3:
                canvas.width = height;
                canvas.height = width;
                ctx.rotate(degree);
                ctx.drawImage(img, -width, 0);
                ctx.translate(0,0);
                break;
        }
        imgurl= canvas.toDataURL();
        imgHeight =canvas.height;
        imgWidth=canvas.width;
    }

    function editImage(){
        $("#rotateBtn").hide();
        $("#pic_loadImg").hide();
        $("#loadImg").hide();

        $("body").append("<div id='editBtn'></div>");
        $("#editBtn").append(" <button onclick='saveImage();'>保存修改</button> ");
        $("#editBtn").append(" <button onclick='clearCanvas();'>清空画布</button> ");
        $("#editBtn").append(" <button onclick='selectClose()'>取消并关闭</button> ");
        $("body").append("<div id='wPaint'></div>");

        $("#wPaint").css({
            width:imgWidth,
            height:imgHeight
        });
        $("#wPaint").wPaint({
            menuOrientation: 'vertical',
            imageBg:imgurl
        });
    }

   //保存编辑后的图片
    function saveImage()
    {
        var imageData = $("#wPaint").wPaint("image");
        $("body").append("<img id='canvasImage' src='"+imageData+"'/>")
    }

    //清空画布
    function clearCanvas()
    {
        $("#wPaint").wPaint("clear");
    }


</script>
</body>
</html>